import React, { FC, useEffect, useState } from 'react'
import { Pagination, Table, Tag, Space } from 'antd'
import type { ColumnsType } from 'antd/lib/table'
import type { PaginationProps } from 'antd'
import fetch from 'utils/request'
// 类型别名
type DataItemType = {
  id: number
  key: string
  username: string
  password: string
  avatar: string
  gender: number
  createTime: string
}

const MyPagination = () => {
  const [tableData, setTableData] = useState<DataItemType[]>([])
  const [total, setTotal] = useState<number>(0)
  const [current, setCurrent] = useState(1)
  const [pageSize, setPagesize] = useState(5)

  const columns: ColumnsType<DataItemType> = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '用户名字',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '密码',
      dataIndex: 'password',
      key: 'password',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      key: 'avatar',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>编辑 {record.username}</a>
          <a>删除</a>
        </Space>
      ),
    },
  ]

  useEffect(() => {
    fetchList({ page: 1, size: 5 })
  }, [])

  const fetchList = async (params: { page: number; size: number }) => {
    const res = await fetch.get('/users/list', { params })
    console.log(res.data.data.userData, 'res')
    const userData = res.data.data.userData
    const total = res.data.data.total
    userData.forEach((item: any) => {
      item.key = item.id
    })
    setTotal(total)
    setTableData(userData)
  }
  const onChange = (page = 1, size: number) => {
    console.log(page, size)
    setCurrent(page) // 跳转实现分页效果
    fetchList({ page, size })
  }
  const onShowSizeChange = (current: number, size: number) => {
    // console.log('current', current, size)
    setCurrent(current)
    setPagesize(size)
  }
  return (
    <div>
      <Table columns={columns} pagination={false} dataSource={tableData} />
      <Pagination
        size="small"
        current={current}
        onChange={onChange}
        onShowSizeChange={onShowSizeChange}
        pageSizeOptions={[5, 10, 15, 20]}
        pageSize={pageSize}
        total={total}
        showSizeChanger
        showQuickJumper
      />
    </div>
  )
}

export default MyPagination
